<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<h3 align="center">用户新增</h3><br>
				<p>
					用户名称: <input type="text" name="name" v-model="user.name"/>
					用户年龄: <input type="text" name="age" v-model="user.age"/>
					用户性别: <input type="text" name="sex" v-model="user.sex"/>
					<button @click="saveUser">新增</button>
				</p>
			</div>
			<hr />
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id" v-model="user.id" disabled/>
						用户名称: <input type="text" name="name" v-model="user.name" />
						用户年龄: <input type="text" name="age" v-model="user.age" />
						用户性别: <input type="text" name="sex" v-model="user.sex" />
						<button @click="updateUserById">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user1 in userList">
					<td v-text="user1.id"></td>
					<td v-text="user1.name"></td>
					<td v-text="user1.age"></td>
					<td v-text="user1.sex"></td>
					<td>
						<button @click="updateUser(user1)">修改</button>
						<button @click="deleteUserById(user1)">删除</button>
					</td>
				</tr>
				
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el:"#app",
				data() {
					return{
						user:{id:"",name:"",age:"",sex:""},
						userList:[],
						input:"",
						userListByIn:[]
					}
				},
				methods:{
					async findUserList(){
						let {data:result} = await axios.get("/axios/findUserList")
						this.userList = result
					},
					updateUser(user1){
						this.user = user1
					},
					async updateUserById(){
						let {status:status} = await axios.put("/axios/updateUserById",this.user)
						if(status === 200){
							alert("修改成功！")
						}else{
							alert("修改失败！")
						}
					},
					async deleteUserById(user1){
						let {status:status} = await axios.delete("/axios/deleteUserById",{params:user1})
						if(status === 200){
							alert("删除成功！")
							this.findUserList()
						}else{
							alert("删除失败！")
						}
					},
					async saveUser(){
						let {data:result,status:status} 
							= await axios.post("/axios/saveUser",this.user)
						if(status === 200){
							alert("添加成功！")
							this.user = {}
							this.findUserList()
						}else{
							alert("添加失败！")
						}
					}
				},
				mounted(){
					this.findUserList()	
				}
			})
		</script>
	</body>
</html>